<template>
  <el-form
      v-if="vFormSelectElem?.attrs"
      :model="vFormSelectElem?.attrs"
      style="padding: 2px;"
  >
    <el-form-item prop="labelPosition" label="标签位置" required>
      <el-select v-model="vFormSelectElem.attrs.labelPosition" style="width: 100%">
        <el-option label="左对齐" value="left" />
        <el-option label="右对齐" value="right" />
        <el-option label="上对齐" value="top" />
        <el-option label="自适应" value="auto" />
      </el-select>
    </el-form-item>

    <el-form-item prop="labelWidth" label="标签宽度" required>
      <el-input v-model="vFormSelectElem.attrs.labelWidth"></el-input>
    </el-form-item>
    <el-form-item prop="labelWidth" label="行距" required>
      <el-input v-model="vFormSelectElem.attrs.lineSpacing"></el-input>
    </el-form-item>

    <el-form-item prop="size" label="尺寸" required>
      <el-radio-group v-model="vFormSelectElem.attrs.size">
        <el-radio-button value="small">偏小</el-radio-button>
        <el-radio-button value="default">默认</el-radio-button>
        <el-radio-button value="large">偏大</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="mode" label="模式">
      <el-radio-group v-model="mode" :min="0" :max="1">
        <el-radio-button value="design">设计</el-radio-button>
        <el-radio-button value="read">只读</el-radio-button>
        <el-radio-button value="edit">编辑</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {
  ElForm, ElFormItem, ElRadioGroup, ElRadioButton, ElInput, ElSelect, ElOption,
} from 'element-plus'
import {computed, inject} from "vue";
import { vFormSchemeKey } from '../../state.key';
import { vFormActiveElementKey } from "@/components/form/state.key";
const formScheme = inject(vFormSchemeKey)!
const vFormSelectElem = inject(vFormActiveElementKey)

const mode = computed({
  get: () => vFormSelectElem.value.attrs.mode ? [vFormSelectElem.value.attrs.mode] : [],
  set: v => {
    if (v?.length) {
      vFormSelectElem.value.attrs.mode = v[0]
    } else {
      vFormSelectElem.value.attrs.mode = undefined
    }
  }
})
</script>

<style scoped>

</style>
